<template>
  <div class="sidebar" :class="{ collapsed: isCollapsed }">
    <!-- 收缩按钮 -->
    <div class="collapse-btn" @click="toggleCollapse" :title="isCollapsed ? '展开侧边栏' : '收缩侧边栏'">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" fill="currentColor"/>
      </svg>
    </div>
    
    <div 
      class="nav-item" 
      :class="{ active: currentPage === 'calls' }"
      @click="navigateTo('calls')"
    >
      <div class="nav-icon">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56a.977.977 0 00-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19c-.54 0-.99.45-.99.99 0 9.36 7.59 16.95 16.95 16.95.54 0 .99-.45.99-.99v-3.45c0-.54-.45-.99-.99-.99z" fill="currentColor"/>
        </svg>
      </div>
      <span class="nav-text" :class="{ 'nav-text-visible': !isCollapsed }">通话</span>
    </div>
    <div 
      class="nav-item" 
      :class="{ active: currentPage === 'contacts' }"
      @click="navigateTo('contacts')"
    >
      <div class="nav-icon">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M16 4c0-1.11.89-2 2-2s2 .89 2 2-.89 2-2 2-2-.89-2-2zm4 18v-6h2.5l-2.54-7.63A1.5 1.5 0 0 0 18.54 8H17c-.8 0-1.54.37-2.01 1l-1.7 2.26V20h-2v-6h-2v6H9V13.26L7.3 11A2.01 2.01 0 0 0 5.29 10H4c-.8 0-1.54.37-2.01 1L1.5 15.5V22h2v-6h2.5l1.04-3.11L8.76 20h2.48l1.22-7.11L13.5 16H16v6h2z" fill="currentColor"/>
        </svg>
      </div>
      <span class="nav-text" :class="{ 'nav-text-visible': !isCollapsed }">联系人</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Sidebar',
  data() {
    return {
      isCollapsed: this.getStoredCollapseState() // 从localStorage获取状态
    }
  },

  computed: {
    currentPage() {
      return this.$route.name?.toLowerCase() || 'calls'
    }
  },

  methods: {
    navigateTo(page) {
      this.$router.push({ name: page.charAt(0).toUpperCase() + page.slice(1) });
    },
    toggleCollapse() {
      this.isCollapsed = !this.isCollapsed;
      this.saveCollapseState();
    },
    
    // 保存折叠状态到localStorage
    saveCollapseState() {
      localStorage.setItem('sidebarCollapsed', JSON.stringify(this.isCollapsed));
    },
    
    // 从localStorage获取折叠状态
    getStoredCollapseState() {
      const stored = localStorage.getItem('sidebarCollapsed');
      return stored !== null ? JSON.parse(stored) : true; // 默认收缩状态
    }
  }
}
</script>

<style scoped>
.sidebar {
  width: 280px;
  background: #ff6b35;
  border-radius: 0 20px 20px 0;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex-shrink: 0;
  transition: width 0.3s ease;
  position: relative;
}

.sidebar.collapsed {
  width: 80px;
  padding: 40px 10px;
}

.collapse-btn {
  position: absolute;
  top: 20px;
  right: -15px;
  width: 30px;
  height: 30px;
  background: #ff6b35;
  border: 2px solid white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  transition: transform 0.3s ease;
  z-index: 10;
}

.collapse-btn:hover {
  transform: scale(1.1);
}

.sidebar.collapsed .collapse-btn {
  transform: rotate(180deg);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 20px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: white;
  justify-content: center;
}

.sidebar:not(.collapsed) .nav-item {
  justify-content: flex-start;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.nav-item.active {
  background: rgba(255, 255, 255, 0.2);
}

.nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-text {
  font-size: 16px;
  font-weight: 500;
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
  max-width: 0;
}

.nav-text-visible {
  opacity: 1;
  transform: translateX(0);
  max-width: 200px;
}
</style>
